<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;" >
      学生信息
    </div>
    <div v-if="student">
      <q-table
        selection="multiple"
        class="q-ma-md tw-border"
        flat
        v-model:selected="selected"
        style="max-height: 80vh;min-height:80vh;overflow:  hidden;overflow-y: auto"
        :rows="student"
        :columns="columns"
        row-key="snum"
        rows-per-page-label="每页显示"
        :rowsPerPage="10"
        :rows-per-page-options="[  10, 15, 20, 25, 50, 0 ]"
        @row-click="(evt,row,index) => {rowClick(row)}"
      >
      </q-table>
    </div>
    <div>
      <q-btn class="q-ma-md" v-if="selected.length" color="primary" label="删除" @click="del()"/>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted} from "vue";
import {useDialogPluginComponent, useQuasar} from 'quasar'
import {api} from "boot/axios";
import StudentConfig from "components/StudentConfig.vue";

const $q = useQuasar()
let info = JSON.parse(localStorage.getItem("info"))
let student = ref([])
let selected = ref([])

let del = () => {
  let sids = []
  selected.value.forEach(item => {
    sids.push(item.sid)
  })
  api({
    url: '/job/student/deletebatch?' + new URLSearchParams({sids: sids}),
    method: 'get'
  }).then(res => {
    let data = res.data
    if (data.code === 200) {
      $q.notify({
        message: '删除成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })
      api({
        url: '/job/student/getdeptstudent?' + new URLSearchParams({dept: info.dept}),
        method: 'get'
      }).then(res => {
        let data = res.data
        if (data.code === 200) {
          student.value = data.data
        } else {
          console.log(data.msg)
        }
      })
    } else {
      $q.notify({
        message: '删除失败',
        color: 'negative',
        position: 'top',
        timeout: 1000
      })
    }
  })
}
let rowClick = (row) => {
  $q.dialog({
    component: StudentConfig,
    componentProps: {
      student: row
    },
    title: '学生详情',
    ok: '确定',
    cancel: '取消',
    html: true,
    persistent: true
  })
}
api({
  url: '/job/student/getdeptstudent?' + new URLSearchParams({dept: info.dept}),
  method: 'get'
}).then(res => {
  let data = res.data
  if (data.code === 200) {
    student.value = data.data
  } else {
    console.log(data.msg)
  }
})

const columns = [
  {
    name: 'sname',
    label: '学生姓名',
    field: row => row.sname
  },
  {
    name: 'snum',
    label: '学号',
    field: row => row.snum
  },
  {
    name: 'dept',
    label: '学院',
    field: row => row.dept
  },
  {
    name: 'major',
    label: '专业',
    field: row => row.major
  },
  {
    name: 'classnumm',
    label: '班级',
    field: row => row.classnum
  },
  {
    name: 'tel',
    label: '电话',
    field: row => row.tel
  },
  {
    name: 'email',
    label: '邮箱',
    field: row => row.email
  },
  {
    name: 'qq',
    label: 'QQ',
    field: row => row.qq
  }
]

</script>

<style scoped>

</style>
